﻿@using KamLib.Web.Bootstrap
@using KamLib.Web.MVC

@{
    var bs = new BootstrapHelper(Html);
}


<div class="btn-toolbar">
    <div class="btn-group">
        @bs.Button("Primary").Primary()
        @bs.Button("Danger").Danger()
        @bs.Button("Warning").Warning()
        @bs.Button("Success").Success()
        @bs.Button("Inverse").Inverse()
    </div>
</div>
<div class="btn-toolbar">
    <div class="btn-group">
        @bs.Button(b => b(t => t("My Button 1", "alert('1')"))).Small()
        @bs.Button(b => b(t => t("My Button 2"))).Small()
        @bs.Button("My Button 3", "alert('3')").Small()
    </div>
</div>
<div class="btn-toolbar">
    <div class="btn-group">
        @bs.Button(b => b(t => t("My Button 4", "alert('4')"), m => m(
            a => a("Dialog", "#dialog"),
            a => a("Dropdown Toggle", "#dropdownToggle"),
            a => a("Modal", "#modal"),
            a => a("Pagination", "#pagination"),
            a => a("Tooltip", "#tooltip")
        ))).Large()
        @bs.Button("My Button 4a", "alert('4')",
            a => a("Dialog", "#dialog"),
            a => a("Dropdown Toggle", "#dropdownToggle"),
            a => a("Modal", "#modal"),
            a => a("Pagination", "#pagination"),
            a => a("Tooltip", "#tooltip")
        ).Large()
    </div>
</div>
<div class="btn-toolbar">
    <div class="btn-group">
        @bs.Button(b => b(t => t("My Button 5"), m => m(
            a => a("Dialog", "#dialog"),
            a => a("Dropdown Toggle", "#dropdownToggle"),
            a => a("Modal", "#modal"),
            a => a("Pagination", "#pagination"),
            a => a("Tooltip", "#tooltip")
        ))).Mini()
        @bs.Button("My Button 5a",
            a => a("Dialog", "#dialog"),
            a => a("Dropdown Toggle", "#dropdownToggle"),
            a => a("Modal", "#modal"),
            a => a("Pagination", "#pagination"),
            a => a("Tooltip", "#tooltip")
        ).Mini()
    </div>
</div>

<hr />

<script type="text/javascript">
    var ButtonsCtrl = function ($scope) {
        $scope.singleModel = 1;
        $scope.radioModel = 'Middle';
        $scope.checkModel = {
            left: false,
            middle: true,
            right: false
        };
    };
</script>
<div data-ng-controller="ButtonsCtrl">
    <h4>Single toggle</h4>
    <pre>{{singleModel}}</pre>
    @bs.Button("Single Toggle").Toggle("singleModel", 1, 0)
    <h4>Checkbox</h4>
    <pre>{{checkModel}}</pre>
    <div class="btn-group">
        @bs.Button("Left").Toggle("checkModel.left").Warning()
        @bs.Button("Middle").Toggle("checkModel.middle").Warning()
        @bs.Button("Right").Toggle("checkModel.right").Warning()
    </div>
    <h4>Radio</h4>
    <pre>{{radioModel}}</pre>
    <div class="btn-group">
        @bs.Button("Left").Toggle("radioModel", "left").Primary()
        @bs.Button("Middle").Toggle("radioModel", "middle").Primary()
        @bs.Button("Right").Toggle("radioModel", "right").Primary()
    </div>
</div>
